/**
* @description: 自定义导航
* @author: JiWei
* @describe: @click="goBack" 传出返回上一层 slot右侧图标插槽 iconfont 右侧扫一扫、screen右侧筛选，title 所属页面自定义
**/
<template>
  <view class="header-menu">
    <view class="header-county">
      <view class="left-icon" @click="goBack">
        <van-icon name="arrow-left"/>
      </view>
      <view class="left-title">{{title}}</view>
      <ul class="right-btn">
        <li>
          <slot name="scan"></slot>
        </li>
        <li>
         <slot name="iconfont"></slot>
        </li>
        <li>
          <slot name="screen"></slot>
        </li>
        <li>
         <slot name="text"></slot>
        </li>
        <li>
          <slot name="selectyear"></slot>
        </li>
      </ul>
      <ul class="right_text">
        <li>
          <slot name="choose_text"></slot>
        </li>
        <li>
          <slot name="choose"></slot>
        </li>
      </ul>
    </view>
  </view>
</template>

<script>
export default {
  name:'navBar',
  props: {
    title: {type: String,defalut:''},
  },
  data() {
    return {
    };
  },
  computed: {
  },
  onLoad() {},
  watch: {
  },
  methods: {
    goBack() {
      this.$emit('goBack')
    }
  },
};
</script>

<style lang="scss" scoped>
.header-menu {
  width: 100%;
  height: px2vh(163);
  background: #417ADC;
  position: relative;
  flex-shrink: 0;

  .header-county {
    width: 100%;
    height: px2vh(54);
    padding-top: px2vh(75);
  }
  // 公共样式
  .left-icon,.left-title,.right-btn {
    height: px2vh(54);
    font-weight: bold;
    font-size: px2vh(54);
    line-height: px2vh(50);
    color: #fff;
  }
  .left-icon {
    float: left;
    margin-left: px2vw(20);
    text-align: center;
  }
  .left-title {
    float: left;
    margin-left: px2vw(10);
  }
  .right-btn {
    position: absolute;
    right: px2vw(0);
    li {
      float: left;
    }
  }
  .right_text {
    height: px2vh(54);
    font-size: px2vh(48);
    line-height: px2vh(50);
    color: #fff;
    position: absolute;
    right: px2vw(0);
    li {
      float: left;
    }
  }
  .mr {
    margin-right: px2vw(40);
  }
}
</style>
